<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-tabs v-model="posName" @tab-click="posClick">
                <el-tab-pane label="账户充值与消费" name="1">
                    <el-table :data="list.list1" :stripe="true" height="515">
                        <el-table-column prop="order_sn" label="订单单号" width="180">
                            <template slot-scope="scope">
                                <el-row v-if="scope.row.order_sn">{{scope.row.order_sn}}</el-row>
                                <el-row v-else>{{scope.row.ordername}}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="odname" label="消费门店">
                            <template slot-scope="scope">
                                <el-row v-if="scope.row.odname">{{scope.row.odname}}</el-row>
                                <el-row v-else>{{scope.row.bodname}}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ordertype" label="订单类型">
                            <template slot-scope="scope">
                                <orderTags :typeValue="scope.row.ordertype" typeName="orderType"></orderTags>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="出入类型">
                            <template slot-scope="scope">
                                <orderTags :typeValue="scope.row.type" typeName="inOutType" :tagStyle="{color: '#fff'}"></orderTags>
                            </template>
                        </el-table-column>
                        <el-table-column prop="balance" label="余额出入"></el-table-column>
                        <el-table-column prop="giftbalance" label="赠送金额出入"></el-table-column>
                        <el-table-column prop="addtime" label="出入时间" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.addtime|hourTime}}
                            </template>
                        </el-table-column>
                        <el-table-column label="详情" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="look(scope.row,1)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block center bg-light">
                        <el-pagination @size-change="SizeChange1" @current-change="PageChange1" :current-page="page1.pages" :page-size="page1.limits" :page-sizes="[15, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="page1.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="订单消费记录" name="2">
                    <el-table :data="list.list2" :stripe="true" height="515">
                        <el-table-column prop="order_sn" label="订单单号" width="170"></el-table-column>
                        <el-table-column prop="departmentname" label="消费门店"></el-table-column>
                        <el-table-column prop="ordertype" label="订单类型">
                            <template slot-scope="scope">
                                <orderTags :typeValue="scope.row.ordertype" typeName="orderType"></orderTags>
                            </template>
                        </el-table-column>
                        <el-table-column prop="recemoney" label="现金支付"></el-table-column>
                        <el-table-column prop="cardreduce" label="卡耗消费"></el-table-column>
                        <el-table-column prop="usebalance" label="余额消费"></el-table-column>
                        <el-table-column prop="usegiftbalance" label="赠送消费"></el-table-column>
                        <el-table-column prop="status" label="订单状态">
                            <template slot-scope="scope">
                                <orderTags :typeValue="scope.row.status" typeName="orderStatus" :style="{color: '#fff'}"></orderTags>
                            </template>
                        </el-table-column>
                        <el-table-column prop="addtime" label="订单时间" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.addtime|hourTime}}
                            </template>
                        </el-table-column>
                        <el-table-column label="详情" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="look(scope.row,2)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block center bg-light">
                        <el-pagination @size-change="SizeChange2" @current-change="PageChange2" :current-page="page2.pages" :page-size="page2.limits" :page-sizes="[15, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="page2.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="卡项消费记录" name="3">
                    <el-table :data="list.list3" :stripe="true" height="515">
                        <el-table-column prop="cardname" label="所属卡名"></el-table-column>
                        <el-table-column prop="cardtype" label="所属卡类型">
                            <template slot-scope="scope">
                                <el-tag type="primary" v-if="scope.row.cardtype===1" size="small">期卡</el-tag>
                                <el-tag type="success" v-if="scope.row.cardtype===2" size="small">次卡</el-tag>
                                <el-tag type="warning" v-if="scope.row.cardtype===0" size="small">其他</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="subjectname" label="项目名称"></el-table-column>
                        <el-table-column prop="price" label="项目单价"></el-table-column>
                        <el-table-column prop="num" label="使用数量"></el-table-column>
                        <el-table-column prop="addtime" label="使用时间" width="200">
                            <template slot-scope="scope">
                                {{scope.row.addtime|hourTime}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block center bg-light">
                        <el-pagination @size-change="SizeChange3" @current-change="PageChange3" :current-page="page3.pages" :page-size="page3.limits" :page-sizes="[15, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="page3.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="暂存消费记录" name="4">
                    <el-table :data="list.list4" :stripe="true" height="515">
                        <el-table-column prop="typename" label="品项名称"></el-table-column>
                        <el-table-column prop="type" label="暂存类型">
                            <template slot-scope="scope">
                                <el-tag type="primary" v-if="scope.row.type===1" size="small">产品</el-tag>
                                <el-tag type="success" v-if="scope.row.type===2" size="small">项目</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="标准价格"></el-table-column>
                        <el-table-column prop="num" label="使用数量"></el-table-column>
                        <el-table-column prop="bname" label="所属品牌"></el-table-column>
                        <el-table-column prop="addtime" label="使用时间" width="200">
                            <template slot-scope="scope">
                                {{scope.row.addtime|hourTime}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block center bg-light">
                        <el-pagination @size-change="SizeChange4" @current-change="PageChange4" :current-page="page4.pages" :page-size="page4.limits" :page-sizes="[15, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="page4.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
</template>
<script>
import C from '@/common/common.js'
import orderTags from '@/components/orderTags.vue'
import P from '@/service/shop/popup.js'
export default {
  name: 'accountMessage',
  data () {
    return {
      list: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      page1: {
        pages: 1,
        limits: 15,
        total: 0
      },
      page2: {
        pages: 1,
        limits: 15,
        total: 0
      },
      page3: {
        pages: 1,
        limits: 15,
        total: 0
      },
      page4: {
        pages: 1,
        limits: 15,
        total: 0
      },
      guestid: '',
      posName: '1'
    }
  },
  methods: {
    posClick: function (tab, event) {
      this.posName = tab.name
      this.getList()
    },
    SizeChange1: function (val) {
      this.page1.limits = val
      this.getList()
    },
    PageChange1: function (val) {
      this.page1.pages = val
      this.getList()
    },
    SizeChange2: function (val) {
      this.page2.limits = val
      this.getList()
    },
    PageChange2: function (val) {
      this.page2.pages = val
      this.getList()
    },
    SizeChange3: function (val) {
      this.page3.limits = val
      this.getList()
    },
    PageChange3: function (val) {
      this.page3.pages = val
      this.getList()
    },
    SizeChange4: function (val) {
      this.page4.limits = val
      this.getList()
    },
    PageChange4: function (val) {
      this.page4.pages = val
      this.getList()
    },
    getList: async function () {
      let getData = {}
      if (this.posName === '1') {
        getData = this.page1
        getData.guestid = this.guestid
        getData.type = this.posName
      } else if (this.posName === '2') {
        getData = this.page2
        getData.guestid = this.guestid
        getData.type = this.posName
      } else if (this.posName === '3') {
        getData = this.page3
        getData.guestid = this.guestid
        getData.type = this.posName
      } else if (this.posName === '4') {
        getData = this.page4
        getData.guestid = this.guestid
        getData.type = this.posName
      }

      let res = await C.ajax('/shop/guest/getguestlog', getData, 'post')
      console.log(res)
      if (res) {
        if (this.posName === '1') {
          this.page1.total = res.count
          this.list.list1 = res.data
        } else if (this.posName === '2') {
          this.page2.total = res.count
          this.list.list2 = res.data
        } else if (this.posName === '3') {
          this.page3.total = res.count
          this.list.list3 = res.data
        } else if (this.posName === '4') {
          this.page4.total = res.count
          this.list.list4 = res.data
        }
      }
    },
    // 查看账户的充值与消费记录
    async look (row, tp) {
      if (tp === 1) {
        switch (row.ordertype) {
          case 'KKD':
            await P.openCardPopup({ id: row.orderid })
            break
          case 'LSD':
            await P.openOrderPopup({ id: row.orderid })
            break
          case 'CZD':
            if (row.type == 5) {
              await P.openBackPopup({ id: row.orderid })
            } else {
              await P.openRechargePopup({ orderid: row.orderid })
            }
            break
          case 'TKD':
          case 'TQD':
            await P.openBackPopup({ id: row.orderid, gid: row.guestid })
            break
        }
      } else if (tp === 2) {
        switch (row.ordertype) {
          case 1:
            await P.openCardPopup({ id: row.id })
            break
          case 2:
            await P.openOrderPopup({ id: row.id })
            break
          case 3:
            await P.openRechargePopup({ orderid: row.id })
            break
        }
      }
    }
  },
  mounted: function () {
    let data = C.getDatas()
    if (data.id != 0 && data.id != 1) {
      this.guestid = data.id
      this.getList()
    }
  },
  components: { orderTags }
}
</script>
<style>
.el-table td,
.el-table th {
    padding: 3px 0;
}
</style>